<!--
 * @Description: 文件描述
 * @Author: 程前
 * @Date: 2025-01-02 14:41:55
 * @LastEditors: 程前
 * @LastEditTime: 2025-02-10 12:02:13
-->
<template>
    <div class="tool-container">
        <div class="tool-item" :class="{ 'active': currentTool === item.value }" v-for="item in toolList"
            :key="item.label" @click="handleTool(item.value)">
            <div class="icon-box">
                <el-icon :size="24">
                    <Film />
                </el-icon>
            </div>
            <span>{{ item.label }}</span>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { getAssetsFile, clearLoader, eventBus } from "@/utils"
import { useCesiumGlobalStore } from "@/store/modules/cesiun-global"
import { useCesiumEditStore } from "@/store/modules/cesium-edit";
import { Film } from '@element-plus/icons-vue'
import { Priticle } from "@/loader"
/**
 * 基本数据
 */
const cesiumEditStore = useCesiumEditStore()
const cesiumGlobalStore = useCesiumGlobalStore()
const toolList = [{
    label: '爆炸',
    value: 'explot'
}, {
    label: '火焰',
    value: 'fire'
}, {
    label: '烟雾',
    value: 'smoke'
}
]

/**
 * 处理工具
 * @param tool 工具类型
 */
const currentTool = ref<string | null>(null)
const handleTool = (type: string) => {
    currentTool.value = currentTool.value === type ? null : type
    if (!currentTool.value) {
        const loader = cesiumGlobalStore.loader
        loader && loader.destroy()
    } else {
        clearLoader()
        const viewer = cesiumGlobalStore.getViewer()
        cesiumGlobalStore.loader = new Priticle(viewer, type)
    }
}


</script>
<style lang="less" scoped>
.tool-container {
    display: flex;
    flex-wrap: wrap;

    .tool-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        cursor: pointer;
        width: 64px;
        height: 80px;
        padding: 2px;
        margin: 10px;

        .icon-box {
            width: 24px;
            height: 24px;
            padding: 8px;
            border-radius: 5px;
            border: 1px solid #e0e0e0;


        }

        &.active {
            background-color: #f0f2f5;
            border-radius: 5px;
        }

        &:hover {
            background-color: #f0f2f5;
            border-radius: 5px;
        }

        span {
            margin-top: 10px;
        }
    }
}
</style>